<template>
  <div class="order-detail">
    <div class="order-detail-title">
      <b>采购计划</b>
    </div>
    <el-form
      class="m-t-10"
      disabled
      label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="计划编号">
            <el-input v-model="orderData.planCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划名称">
            <el-input v-model="orderData.planName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申报单位">
            <el-input v-model="orderData.declareCompany"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="采购商">
            <el-input v-model="orderData.purchaser"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目名称">
            <el-input v-model="orderData.projectName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="钢材计划总量">
            <el-input v-model="orderData.planTotal">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="建筑面积">
            <el-input v-model="orderData.grossArea">
              <template slot="append">M</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="order-detail-title m-t-20">
      <b>计划详情</b>
    </div>
    <el-button
      @click="download"
      class="m-t-10"
      size="small"
    >导出</el-button>
    <el-table
      class="m-t-10"
      border
      :data="tableData">
      <el-table-column
        align="center"
        label="序号"
        prop="serialNumber"
      >
        <template slot-scope="scope">
          <div style="min-height: 23px;">{{scope.row.serialNumber}}</div>
        </template>
      </el-table-column>

      <!-- <el-table-column
        align="center"
        label="项目名称"
        prop="projectName"
      ></el-table-column>

      <el-table-column
        align="center"
        label="钢材总量计划"
        prop="planTotal"
      ></el-table-column>

      <el-table-column
        align="center"
        label="建筑面积（M）"
        prop="grossArea"
      ></el-table-column> -->

      <el-table-column
        align="center"
        label="商品名称"
        prop="goodsName"
      ></el-table-column>

      <el-table-column
        align="center"
        label="规格"
        prop="specification"
      ></el-table-column>

      <el-table-column
        align="center"
        label="预算（预计数量）"
        prop="budget"
      ></el-table-column>

      <!-- <el-table-column
        align="center"
        label="形象进度"
        prop="progress"
      ></el-table-column> -->
      
      <el-table-column
        align="center"
        label="计划到场日期"
        prop="planDate"
      ></el-table-column>

      <el-table-column
        align="center"
        label="使用部位"
        prop="userForPart"
      ></el-table-column>

      <el-table-column
        align="center"
        label="备注"
        prop="remark"
      ></el-table-column>

      <el-table-column
        align="center"
        label="已发货数量"
        prop="deliveryNumber"
      ></el-table-column>

      <el-table-column
        align="center"
        label="已收货数量"
        prop="deliveryedNumber"
      ></el-table-column>
    </el-table>
    <div class="flex m-t-20">
      <div>现场主管：</div>
      <div class="w200 inline-block p-l-20 b-b-666">XXX</div>
      <div>项目经理：</div>
      <div class="w200 inline-block p-l-20 b-b-666">XXX</div>
      <div>材料员：</div>
      <div class="w200 inline-block p-l-20 b-b-666">XXX</div>
    </div>

    <div class="order-detail-title m-t-20">
      <b>附件信息</b>
    </div>
    <p
      class="p-l-20">
      <span>计划材料：</span>
    </p>
    <div
      class="p-l-20">
      <el-image
        style="
        width: 150px;
        height: 150px;
        padding: 6px;
        border: 1px dashed #ccc;
        border-radius: 6px;"
        :src="url"
      ></el-image>
    </div>
    <div class="text-center m-t-20">
      <el-button
        @click="close"
        type="warning"
      >关闭</el-button>
    </div>
  </div>
</template>

<script>
import { utils } from "@/utils/utils";
export default {
  props: {
    orderData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      url: 'https://wjc-bucket.oss-cn-beijing.aliyuncs.com/files/61005729a1534b5893e1a54b83e002cfaa.jpg',
      tableData: [
        {
          serialNumber: "1", // 序号
          // projectName: "深圳湾一号", // 项目名称
          // planTotal: '10000', // 钢材总量计划
          // grossArea: '10000', // 建筑面积（M）
          goodsName: 'HPB300', // 商品名称
          specification: '8', // 规格
          budget: '8', // 预算（预计数量）
          progress: '', // 形象进度
          planDate: '2022-04-18', // 计划到场日期
          userForPart: 'B123钢筋房', // 使用部位
          remark: '', // 备注
          deliveryNumber: '', // 已发货数量
          deliveryedNumber: '', // 已收货数量
        },
        {
          serialNumber: "", // 序号
          // projectName: "", // 项目名称
          // planTotal: '', // 钢材总量计划
          // grossArea: '', // 建筑面积（M）
          goodsName: '', // 商品名称
          specification: '', // 规格
          budget: '', // 预算（预计数量）
          progress: '', // 形象进度
          planDate: '', // 计划到场日期
          userForPart: '', // 使用部位
          remark: '', // 备注
          deliveryNumber: '', // 已发货数量
          deliveryedNumber: '', // 已收货数量
        },
        {
          serialNumber: "", // 序号
          // projectName: "", // 项目名称
          // planTotal: '', // 钢材总量计划
          // grossArea: '', // 建筑面积（M）
          goodsName: '', // 商品名称
          specification: '', // 规格
          budget: '', // 预算（预计数量）
          progress: '', // 形象进度
          planDate: '', // 计划到场日期
          userForPart: '', // 使用部位
          remark: '', // 备注
          deliveryNumber: '', // 已发货数量
          deliveryedNumber: '', // 已收货数量
        }
      ]
    }
  },
  created(){

  },
  mounted(){

  },
  methods: {
    close(){
      this.$emit('close')
    },
    download(){
      utils.exportExcel(
        ['序号','商品名称','规格', '预算（预计数量）', '计划到场日期', '使用部位', '备注', '已发货数量', '已收货数量'],
        ['serialNumber','goodsName','specification', 'budget', 'planDate', 'userForPart', 'remark', 'deliveryNumber', 'deliveryedNumber'],
        this.tableData, '计划详情');
    }
  }
}
</script>

<style lang="scss">
.order-detail{
  .order-detail-title{
    border-bottom: 1px solid #ccc;
  }
}
</style>